<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹性盒子</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      ul {
        width: 800px;
        border: 10px solid red;
        display: flex;

        /* 
            flex-direction: row; 默认值 行 水平排列 左向右
            flex-direction: row-reverse; 反向 右向左
            flex-direction: column; 列 上向下
            flex-direction: column-reverse; 下向上
         */
        flex-direction: row;
      }

      li {
        width: 100px;
        height: 100px;
        background-color: #bfa;

        font-size: 50px;
        text-align: center;
        line-height: 100px;
        /* 浮动会带来塌陷  float: left;*/
        /* float: left; */
        /* display: flex; 也可以为子元素设置 */

        /* 
            flex-grow: 1; 弹性扩展
            flex-shrink: 1; 弹性收缩
            flex-basis: 100px; 弹性基础
        */
        flex-grow: 1;
      }

      li:nth-child(2) {
        background-color: pink;
      }

      li:nth-child(3) {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <!-- 
        flex弹性盒、伸缩盒
        是css中的又一种布局手段
        弹性盒模型，也称为弹性布局， 
        元素跟随页面的大小改变而改变
            display: flex; 块级弹性容器
            display: inline-flex; 行内弹性容器 用得较少
    -->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
